<template>
  <div class="echarts">
    <div :id="echartsId" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
export default {
  props: {
    echartsId: {
      type: String
    }
  },
  data() {
    return {

    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initBar();
    });
  },
  methods: {
    initBar() {
      const myChart = this.$echarts.init(document.getElementById(this.echartsId)); // 图标初始化
      myChart.setOption({
        legend: {},
        tooltip: {},
        grid: {
          left: "10%",
          top: "25%",
          right: "5%",
          bottom: "20%"
        },
        dataset: {
          source: [
            ["800KV", 2, 1, 2],
            ["500KV", 4, 1, 3],
            ["400KV", 2, 4, 1],
            ["200KV", 3, 2, 1],
            ["100KV", 1, 3, 2]
          ]
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0db1cb",
              width: 0,
              type: "solid"
            }
          }
        },
        yAxis: {
          name: "单位：条", // y轴上方的单位
          nameTextStyle: {// y轴上方单位的颜色
            color: "#fff"
          },
          axisLabel: {// y轴文字的配置
            textStyle: {
              color: "#0db1cb",
              margin: 15
            }
          }

        },
        series: [{
          type: "bar",
          barWidth: 10, // 柱子宽度
          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: "#fa4159"
          }
        },
        {
          type: "bar",
          barWidth: 10, // 柱子宽度
          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: "#f0a933"
          }
        }, {
          type: "bar",
          barWidth: 10, // 柱子宽度
          itemStyle: {
            barBorderRadius: [15, 15, 0, 0],
            color: "#1266f8"
          }
        }]
      }); // 渲染页面
    }
  }
};
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
